@use "sass:math";

.toolbar__play-button {
	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 0 0 #{math.div(3, $base-font-size)}rem;

		&--selected {
			@extend %toolbar-button--selected;
		}

		&:disabled {
			cursor: auto;

			& g,
			& path {
				fill: getThemifyVariable('button-border-color');
			}

			&:hover {
				background-color: getThemifyVariable('toolbar-button-background-color');

				& g,
				& path {
					fill: getThemifyVariable('button-border-color');
				}
			}
		}
	}

	margin-right: #{math.div(15, $base-font-size)}rem;

	span {
		padding-left: #{math.div(4, $base-font-size)}rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{math.div(20, $base-font-size)}rem;
		height: #{math.div(20, $base-font-size)}rem;
	}
}

.toolbar__play-sketch-button {
	@extend %hidden-element;
}

.toolbar__stop-button {
	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: #{math.div(15, $base-font-size)}rem;
		padding: 0;

		&--selected {
			@extend %toolbar-button--selected;
		}
	}

	span {
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{math.div(20, $base-font-size)}rem;
		height: #{math.div(20, $base-font-size)}rem;
	}
}

.toolbar__preferences-button {
	@include themify() {
		@extend %toolbar-button;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;

		&--selected {
			@extend %toolbar-button--selected;
		}
	}

	margin-left: auto;

	& span {
		padding-left: #{math.div(1, $base-font-size)}rem;
		display: flex;
		align-items: center;
		justify-content: center;
		width: #{math.div(20, $base-font-size)}rem;
		height: #{math.div(20, $base-font-size)}rem;
	}
}

.toolbar__logo {
	margin-right: #{math.div(30, $base-font-size)}rem;

	@include themify() {
		& g,
		& path {
			fill: getThemifyVariable('logo-color');
		}
	}
}

.toolbar {
	padding: #{math.div(10, $base-font-size)}rem #{math.div(20, $base-font-size)}rem;
	display: flex;
	align-items: center;

	@include themify() {
		border-bottom: 1px dashed map-get($theme-map, 'nav-border-color');
	}
}

.lock-icon {
	height: 60%;
	width: 60%;
}

.unlock-icon {
	height: 60%;
	width: 60%;
}

.toolbar__project-name-container {
	margin-left: #{math.div(10, $base-font-size)}rem;
	padding-left: #{math.div(10, $base-font-size)}rem;
	display: flex;
	align-items: center;

	> section {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 30px;
		width: 30px;
	}
}

.toolbar .editable-input__label {
	@include themify() {
		color: getThemifyVariable('secondary-text-color');

		& path {
			fill: getThemifyVariable('secondary-text-color');
		}
	}
}

.toolbar .editable-input__input {
	border: 0;
}

.toolbar__project-owner {
	margin: 0; 
	@include themify() {
		color: getThemifyVariable('secondary-text-color');
	}
}

.toolbar__autorefresh-label {
	cursor: pointer;

	@include themify() {
		color: getThemifyVariable('secondary-text-color');

		&:hover {
			color: getThemifyVariable('logo-color');
		}
	}

	margin-left: #{math.div(5, $base-font-size)}rem;
	font-size: #{math.div(12, $base-font-size)}rem;
}

.toolbar__autorefresh {
	display: flex;
	align-items: center;
}

.checkbox__autorefresh {
	cursor: pointer;

	@include themify() {
		accent-color: getThemifyVariable('logo-color');
	}
}

.toolbar__makeprivate {
	display: flex;
	align-items: center;
	gap: #{math.div(4, $base-font-size)}rem;
}

.toolbar__togglevisibility {
	cursor: pointer;

	@include themify() {
		accent-color: getThemifyVariable('logo-color');
	}
}